<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>商品清单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand/logo -->
    <a class="navbar-brand" href=".">商品清单</a>
    <ul class="nav ml-auto" style="margin-right: 150px">
        <c:choose>
            <c:when test="${empty sessionScope.id}">
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-primary"
                       href="${pageContext.request.getContextPath()}/user/login.jsp">登录</a>
                </li>
            </c:when>
            <c:otherwise>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">${sessionScope.id}</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" target="_blank"
                           href="${pageContext.request.getContextPath()}/Product?op=manage&page=0&limit=10">商品管理</a>
                        <a class="dropdown-item" target="_blank"
                           href="${pageContext.request.getContextPath()}/User?op=modify&id=${sessionScope.id}">修改个人信息</a>
                        <a class="dropdown-item" href="${pageContext.request.getContextPath()}/User?op=logout">登出</a>
                    </div>
                </li>
            </c:otherwise>
        </c:choose>
    </ul>
</nav>
<div class="container">
    <div class="row">
        <c:forEach items="${list}" var="product">
            <div class="card  col-md-2" style="width:100px;margin: 10px 10px;">
                <a href="${pageContext.request.getContextPath()}/Product?op=detail&id=${product.productID}">
                    <img class="card-img-top"
                         src="${pageContext.request.getContextPath()}/static/images/${product.picture}" alt="Card image"
                         height="128px" style="width:100%">
                    <div class="card-body">
                        <h6 class="card-title">${product.model} - ${product.name}</h6>
                        <p class="card-text"><span class="badge badge-secondary">${product.serialNumber}</span></p>
                        <span class="badge badge-primary center-pill">${product.brand}</span>
                        <span class="badge badge-pill badge-success center-pill">￥ ${product.price}</span>
                    </div>
                </a>
            </div>
        </c:forEach>
    </div>
    <div class="fixed-bottom">
        <ul class="m-auto pagination justify-content-center" style="margin-top: 10px;">
            <li id="li-prev" class="page-item"><a class="page-link"
                                                  href="${pageContext.request.getContextPath()}/Product?op=page&page=${page-1}&limit=10">
                < </a></li>
            <c:forEach var="s" begin="1" end="${count/10+(count%10>0 ? 1 : 0)}">
                <li id="li-${s}" class="page-item"><a class="page-link"
                                                      href="${pageContext.request.getContextPath()}/Product?op=page&page=${s-1}&limit=10">${s}</a>
                </li>
            </c:forEach>
            <li id="li-next" class="page-item"><a class="page-link"
                                                  href="${pageContext.request.getContextPath()}/Product?op=page&page=${page+1}&limit=10">
                > </a></li>
        </ul>
        <br/>

    </div>
    <p class="float-right">cont:${count}</p>
</div>
<script>
    $("#li-${page+1}").addClass("active");
    <c:if test="${page==0}">
    $("#li-prev").addClass("disabled");
    </c:if>
    <c:if test="${(page+1)*10 >= count}">
    $("#li-next").addClass("disabled");
    </c:if>
</script>
</body>
</html>